<template>
  <view class="home_container">
    <view class="view_wallet">
      <view class="wallet_info">
        <view class="icon_sj" :style="$imgPath('home/icon_sj.png','bg_cover')"></view>
        <view class="wallet_num">1800</view>
        <view class="icon_add" :style="$imgPath('home/icon_add.png','bg_cover')"></view>
      </view>
    </view>
    <view class="view_top" :style="$imgPath('home/top_bg.png','bg_heightFix')">
      <image class="icon_rank" :src="$imgPath('home/rank.png')" mode="heightFix" />
      <text class="wallet_name">卡尔玛碎片</text>
      <view class="wallet_big_num">
        <text>1800</text>
        <text class="wallet_rate" :class="{down: 0 < 0}">
          <i class="iconfont icon-shangsheng"></i>
          +20%
        </text>
      </view>
    </view>
    <view class="view_index">
      <view class="index_line" :style="$imgPath('home/index_line.png','bg_heightFix')"></view>
      <view class="index_tabs">
        <view v-for="(item,index) in indexTabList" :key="index" class="tab_item" :class="{active:tabActive === item.key}" @click="clickTab(item)">
          <image class="item_icon" :src="$imgPath(item.icon)" mode="heightFix" />
          <image class="item_icon active" :src="$imgPath(item.activeIcon)" mode="heightFix" />
          <text class="item_name">{{item.label}}</text>
        </view>
      </view>
      <view class="index_box" :style="$imgPath('home/index_border.png','bg_cover')">
        <view class="index_icon" :style="$imgPath('home/index_bg.png','bg_heightFix')">
          <view class="index_info">
            <text class="index_name">本周指数</text>
            <text class="index_val">50001</text>
          </view>
        </view>
        <viewBarLine :config="barLineConfig" :data="barLineData"/>
      </view>
    </view>
    <view class="view_type type_list">
      <view v-for="(item,index) in typeList" :key="index" class="list_item" :style="$imgPath(item.icon,'bg_heightFix')">
        <text class="item_val">800</text>
      </view>
    </view>
    <viewFooter />
  </view>
</template>

<script>
  import meSection from '@/components/ui/me-section/index.vue';
  import viewFooter from '@/pages/common/footer/index.vue';
  import viewBarLine from '@/components/charts/barLine.vue';
import { create } from 'lodash-es';
  export default {
    components:{
      meSection,
      viewFooter,
      viewBarLine
    },
    data() {
      return {
        tabActive:'value',
        indexTabList: [
          {
            label:'分解',
            key:'value',
            icon: 'home/icon_tab1.png',
            activeIcon: 'home/icon_tab1_active.png'
          },
          {
            label:'放置',
            key:'value1',
            icon: 'home/icon_tab2.png',
            activeIcon: 'home/icon_tab2_active.png'
          }

        ],
        typeList: [
          {
            label:'传说',
            key:'传说',
            icon: 'home/icon_type4.png'
          },
          {
            label:'史诗',
            key:'史诗',
            icon: 'home/icon_type3.png'
          },
          {
            label:'稀有',
            key:'稀有',
            icon: 'home/icon_type2.png'
          },
          {
            label:'普通',
            key:'普通',
            icon: 'home/icon_type1.png'
          },
        ],
        barLineConfig: {
          xAxis: {
            key: 'name'
          },
          series: [
            {
              key: 'value',
              unit:'',
              name: '分解',
              type: 'line',
            }
          ]
        },
        barLineData: [
          {name:'1月',value:'848',value1:'626'},
          {name:'2月',value:'539',value1:'658'},
        ],

      }
    },
    created(){
      this.initLineData()
    },
    methods: {
      clickTab(item) {
        this.tabActive = item.key
        this.initLineData()
      },
      async initLineData () {
        const tabInfo = this.indexTabList.find((item)=> item.key === this.tabActive)
        if(tabInfo){
          setTimeout(()=>{
            this.barLineConfig['series'][0]['name'] = tabInfo.label
            this.barLineConfig['series'][0]['key']= tabInfo.key
            this.barLineData = [
              {name:'1月',value:'848',value1:'626'},
              {name:'2月',value:'539',value1:'658'},
              {name:'3月',value:'769',value1:'1038'},
              {name:'4月',value:'806',value1:'989'},
              {name:'5月',value:'877',value1:'1381'},
              {name:'6月',value:'943',value1:'3272'},
              {name:'7月',value:'860',value1:'7448'},
              {name:'8月',value:'860',value1:'3826'},
              {name:'9月',value:'885',value1:'3995'},
              {name:'10月',value:'683',value1:'720'},
              {name:'11月',value:'783',value1:'686'},
              {name:'12月',value:'761',value1:'1240'}
            ]
          },2000)
        }

      },
    }
  }
</script>

<style lang="scss" scoped>
  /* #ifndef APP-NVUE */
  page {
    background-image: url('@/static/images/home/home_bg.png');
    background-position: top center;
    background-size: 100% auto;
    background-color: #1a1611;
    background-repeat: no-repeat;
    min-height: 100%;
    height: auto;
  }
  .home_container{
    width: 100%;
    padding: 88rpx 40rpx 100rpx;
    .view_wallet{
      width: 100%;
      height: 65rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .wallet_info{
        min-width: 160rpx;
        height: 46rpx;
        margin-right: 26rpx;
        background: #040303;
        border: 1rpx solid $primary-color-weight;
        background-position:center center;
        padding: 0rpx 28rpx;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon_sj,.icon_add{
          position: absolute;
          left: 0;
          bottom: -4rpx;
          width: 48rpx;
          height: 67rpx;
          background-position:center center;
          background-repeat: no-repeat;
          transform: translate(-50%,0);
          &.icon_add{
            width: 52rpx;
            height: 52rpx;
            left: unset;
            right: 0;
            bottom: 50%;
            transform: translate(50%,50%);
          }
        }
        .wallet_num{
          font-family: DIN-BOLD;
          font-weight: 500;
          font-size: 26rpx;
          line-height: 36rpx;
          text-align: center;
          @include linearText();
        }
      }
    }
    .view_top{
      width: 100%;
      height: 327rpx;
      margin: 50rpx auto;
      padding: 50rpx 40rpx 30rpx;
      background-repeat: no-repeat;
      background-position: center center;
      position: relative;
      .icon_rank{
        position: absolute;
        top: 10rpx;
        right: 0;
        width: auto;
        height: 110rpx;
      }
      .wallet_name{
        display: block;
        font-family: DIN;
        font-weight: 500;
        font-size: 30rpx;
        line-height: 40rpx;
        text-align: center;
        @include linearText('bottom');
      }
      .wallet_big_num{
        margin-top: 10rpx;
        font-family: DIN-BOLD;
        font-style: italic;
        font-weight: 500;
        font-size: 95rpx;
        line-height: 110rpx;
        text-align: center;
        @include linearText();
        .wallet_rate{
          font-family: DIN;
          margin-left: 10rpx;
          font-size: 32rpx;
          line-height: 42rpx;
          color: $uni-color-success;
          .iconfont{
            font-size: 40rpx;
            line-height: 50rpx;
          }
          &.down{
            color: $uni-color-error;
            .iconfont{
              transform: rotate(180deg);
            }
          }
        }
      }
    }
    .view_index{
      width: 100%;
      height: auto;
      margin: 0 auto 50rpx;
      padding-top: 104rpx;
      position: relative;
      .index_line{
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%,-100%);
        width: 100%;
        height: 41rpx;
        background-repeat: no-repeat;
        background-position: bottom center;
      }
      .index_tabs{
        width: 100%;
        margin-bottom: -2rpx;
        padding: 0 34rpx;
        display: flex;
        align-items: flex-end;
        .tab_item{
          width: 150rpx;
          height: 70rpx;
          background-repeat: no-repeat;
          background-position: center center;
          display: flex;
          align-items: center;
          justify-content: center;
          .item_icon{
            display: block;
            width: auto;
            height: 28rpx;
            margin-right: 15rpx;
            &.active{
              display: none;
            }
          }
          .item_name{
            font-family: DIN;
            font-size: 26rpx;
            line-height: 36rpx;
            text-align: center;
            @include linearText('bottom');
          }
          &+.tab_item{
            position: relative;
            &::after{
              content: ' ';
              position: absolute;
              left: 0;
              top: 0;
              width: 1rpx;
              height: 100%;
              background: linear-gradient(to top,transparent, $primary-color, transparent );
            }
          }
          &.active{
            background: linear-gradient(to top,$primary-color,rgba($primary-color,0.05), transparent );
            position: relative;
            &::before{
              content: ' ';
              position: absolute;
              left: 50%;
              top: 0;
              transform: translate(-50%,-50%);
              width: 19rpx;
              height: 24rpx;
              background:url('@/static/images/home/icon_tab_dot.png') no-repeat center/cover; 
            }
            .item_icon{
              display: none;
              &.active{
                display: block;
              }
            }
            .item_name{
              @include linearText();
            }
          }
        }
      }
      .index_box{
        width: 608rpx;
        height: 430rpx;
        margin: 0 auto;
        position: relative;
        .index_icon{
          position: absolute;
          top: 0;
          right: -10rpx;
          width: 300rpx;
          height: 319rpx;
          transform: translate(0,-50%);
          background-repeat: no-repeat;
          background-position: center center;
          padding: 124rpx 50rpx 84rpx;
          .index_info{
            width: 100%;
            height: 100%;
            background: rgba($color: red, $alpha: 0.3);
            padding: 20rpx;
            font-family: DIN;
            font-style: italic;
            font-size: 24rpx;
            line-height: 30rpx;
            text-align: center;
            @include linearText('bottom');
            .index_val{
              display: block;
              font-family: DIN-BOLD;
              font-size: 44rpx;
              line-height: 50rpx;
              @include linearText();
            }
          }
        }
      }
    }
    .view_type{
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      .list_item{
        width: 164rpx;
        height: 164rpx;
        margin: 0 2rpx;
        background-position: center center;
        background-repeat: no-repeat;
        padding: 35rpx 20rpx 20rpx 15rpx;
        .item_val{
          display: block;
          font-style: italic;
          font-family: DIN-BOLD;
          font-weight: 500;
          font-size: 36rpx;
          line-height: 46rpx;
          text-align: center;
          @include linearText();
        }
      }
    }
  }
</style>
